<template>
  <div class="life-container">
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex" style="width: 100%">
          <div class="flex align-center" style="width: 100%">
            <div class="flex-auto ">
              <div class="flex justify-content-space-between">
                <div class="title">{{ cardList1[0].title }}</div>
              </div>
              <div class="flex align-center  justify-content-space-between">
                <div class="count" style="color: red">￥{{cardList1[0].count}} </div>
              </div>
            </div>
             <div>
               <img :src="cardList1[0].icon" style="display: block;width: 60px;"  alt="">
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex" style="width: 100%">
          <div class="flex align-center" style="width: 100%">
            <div class="flex-auto ">
              <div class="flex justify-content-space-between">
                <div class="title">{{ cardList1[1].title }}</div>
              </div>
              <div class="flex align-center  justify-content-space-between">
                <div class="count">{{cardList1[1].count}} </div>
              </div>
            </div>
            <div>
              <img :src="cardList1[1].icon" style="display: block;width: 60px;"  alt="">
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex" style="width: 100%">
          <div class="flex align-center" style="width: 100%">
            <div class="flex-auto ">
              <div class="flex justify-content-space-between">
                <div class="title">{{ cardList1[2].title }}</div>
              </div>
              <div class="flex align-center  justify-content-space-between">
                <div class="count">￥{{cardList1[2].count}} </div>
              </div>
            </div>
            <div>
              <img :src="cardList1[2].icon" style="display: block;width: 60px;"  alt="">
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex" style="width: 100%">
          <div class="flex align-center" style="width: 100%">
            <div class="flex-auto ">
              <div class="flex justify-content-space-between">
                <div class="title">{{ cardList1[3].title }}</div>
              </div>
              <div class="flex align-center  justify-content-space-between">
                <div class="count">{{cardList1[3].count}}% </div>
              </div>
            </div>
            <div>
              <img :src="cardList1[3].icon" style="display: block;width: 60px;"  alt="">
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 党员缴纳 -->
    <div class="pay-container flex justify-content-space-between">
         <div class="pay">
           <div class="flex justify-content-space-between">
             <div class="title">党员缴纳</div>
             <div class="date">{{ratioInfo.pbFeeTime}}</div>
           </div>
           <div class="flex justify-content-space-between" style="margin-top: 30px">
             <div class="title" style="font-weight: normal;font-size: 17px">基本工资</div>
             <div class="date" style="font-weight: bolder;color: #333333">￥{{ratioInfo.pbFeeSalary}}</div>
           </div>
           <div class="flex justify-content-space-between"  style="margin-top: 20px; border-bottom: 1px solid #E8EAED;padding-bottom: 20px">
             <div class="title" style="font-weight: normal;font-size: 17px">党费比例</div>
             <div class="date" style="font-weight: bolder;color: #333333">{{ratioInfo.pbFeeRatio}}%</div>
           </div>
           <div class="flex justify-content-space-between"  style="margin-top: 20px; ">
             <div class="title">应缴党费</div>
             <div class="date" style="font-weight: bolder;color: #ee0505;font-size: 20px">{{ratioInfo.pbFeeMoney}}%</div>
           </div>
           <div @click="pay" class="flex justify-content-center align-center"  style="margin-top: 20px;color: #ffffff;background-color: #EE1C25;padding: 5px;border-radius: 5px;">
             <img src="../../../assets/smart/应缴党费.png" style="display: block;width: 35px;height: 35px" alt="">
             <div style="margin-left: 10px;font-size: 16px" >立即缴纳</div>
           </div>
           <div class="date" style="text-align: center;margin-top: 20px;font-size: 15px;margin-bottom: 20px">支持微信、支付宝、银联支付</div>
         </div>
        <div class="payment-record flex-auto">
          <PayRecordComponent />
        </div>
    </div>
    <!-- 党费缴纳记录 -->
    <AllPayRecordComponent />
    <!-- 党费计算标准 -->
    <div class=" standard-container flex justify-content-space-between">
       <div class="standard flex-auto" style="background-color: #FFFFFF;margin-right: 10px;">
         <div class="flex justify-content-space-between">
           <div class="title">党费计算标准</div>
           <div class="date flex align-center" style="color: #EE1D26">
             <el-icon style="font-size: 18px"><Edit /></el-icon>
             <div style="padding-left: 5px;cursor: pointer" @click="standardVisible = true">修改标准</div>
           </div>
         </div>
         <el-table :data="feeRules"  style="width: 100%;margin-top: 20px;padding-bottom: 20px" height="200px">
           <el-table-column prop="pbFeeLeveName" label="岗位级别"  />
           <el-table-column prop="pbFeeSalary" label="工资范围" align="center" />
           <el-table-column prop="pbFeeRatio" label="党费比例" align="center" />
           <el-table-column prop="pbFeeResult" label="示例" align="center" />
         </el-table>
       </div>
       <!--  支部党费收缴情况  -->
       <div class="situation flex-auto" style="background-color: #FFFFFF;margin-left: 10px">
         <div class="flex justify-content-space-between align-center">
           <div class="title">支部党费收缴情况</div>
           <el-select v-model="year" placeholder="请选择年份" style="width: 150px" @change="getFeeCommitteeList">
             <el-option v-for="year in recentYearsOptions" :key="year.value" :label="year.label" :value="year.value"></el-option>
           </el-select>
         </div>
         <EchartsComponent :options="chartOption0" class="charts-common"></EchartsComponent>
       </div>
    </div>
    <!-- 缴纳党费-->
    <PartyFeePaymentDialog v-model:visible="payVisible" :member-options="memberOptions"/>

    <!-- 党费使用申请-->
    <UseApply />

    <el-dialog v-model="standardVisible" title="党费计算标准修改" @close="handleStandardClose" @open="handleStandardOpen">
      <el-form ref="standardFormRef" :model="standardForm" :rules="standardFormRules">

        <el-form-item label="岗位级别" label-width="140px" prop="pbFeeLeveName">
          <el-select v-model="standardForm.pbFeeLeveName" placeholder="请选择岗位级别">
            <el-option v-for="(item,index) in feeRules"   :key="index" :label="item.pbFeeLeveName" :value="item.pbFeeLeveName" />
          </el-select>
        </el-form-item>

        <el-form-item label="薪资标准" label-width="140px" prop="pbFeeSalary">
          <el-select v-model="standardForm.pbFeeSalary"  placeholder="请选择薪资标准">
            <el-option v-for="(item,index) in feeRules"   :key="index" :label="item.pbFeeSalary" :value="item.pbFeeSalary" />
          </el-select>
        </el-form-item>

        <el-form-item label="比例" label-width="140px" prop="pbFeeRatio">
          <el-input v-model="standardForm.pbFeeRatio" autocomplete="off"  placeholder="请输入党建比例" />
        </el-form-item>


        <el-form-item label="示例结果" label-width="140px" prop="pbFeeResult">
          <el-input v-model="standardForm.pbFeeResult" autocomplete="off" placeholder="请输入示例结果"  />
        </el-form-item>


      </el-form>
      <template #footer>
  <span class="dialog-footer">
    <el-button @click="standardVisible = false">取消</el-button>
    <el-button type="primary" @click="handleStandardConfirm">确认</el-button>
  </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Search,Plus } from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import PayRecordComponent from "./component/PayRecordComponent.vue"
import AllPayRecordComponent from "./component/AllPayRecordComponent.vue"
import UseApply from "./component/UseApply.vue"
import EchartsComponent from "@/components/ECharts/index.vue";
import {getFeeCompute, getFeeRatio, getFeeUserCountInfo, updateFeeCompute} from "@/api/cost/cost.js";
import PartyFeePaymentDialog from './component/PartyFeePaymentDialog.vue'
import {getFeeCommittee, getUserNameInfo} from "@/api/life/relationship.js";
const cardList1 = ref([
  {
    title: '本月应缴金额',
    count: 2847,
    icon: new URL('../../../assets/smart/应缴党费.png', import.meta.url).href,
  },
  {
    title: '待缴人数',
    count: 2847,
    icon: new URL('../../../assets/smart/待缴人数.png', import.meta.url).href,
  },
  {
    title: '已缴金额',
    count: 2847,
    icon: new URL('../../../assets/smart/已缴金额.png', import.meta.url).href,
  },
  {
    title: '缴费完成率',
    count: 2847,
    icon: new URL('../../../assets/smart/缴费完成率.png', import.meta.url).href,
  }
]);
const filter = ref('all'); // 筛选条件
const feeRules = ref([]);
const feeCommitteeList =ref([]);
const chartOption0 = ref( {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['应缴金额', '实缴金额'],
    left: 'center'
  },
  // 只有数据量超过阈值时才添加dataZoom配置, todo...阈值是6, 4为X轴的数据量,可以根据实际接口数据量来选择是否添加dataZoom
  // ...(4 >= 6 && {
  //   dataZoom: [
  //     {
  //       type: 'slider',
  //       show: true,
  //       xAxisIndex: 0,
  //       start: 0,
  //       end: Math.min(100, (4 / 8) * 100),
  //       bottom: 10
  //     },
  //     {
  //       type: 'inside',
  //       xAxisIndex: 0,
  //       start: 0,
  //       end: Math.min(100, (4 / 8) * 100)
  //     }
  //   ]
  // }),
  xAxis: {
    type: 'category',
    data: ['内科支部', '外科支部', '妇产科支部', '儿科支部', '医技支部', '行政支部']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '应缴金额',
      type: 'bar',
      data: [1200, 1500, 900, 700, 900, 600],
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
        color: '#d9534f'
      }
    },
    {
      name: '实缴金额',
      type: 'bar',
      data: [1100, 1400, 900, 650, 800, 600],
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
        color: '#5cb85c'
      }
    }
  ]
});
const payVisible = ref(false);
const memberOptions = ref([])
const ratioInfo = ref({});
const standardVisible = ref(false);
const standardFormRef = ref(null);
const computeList = ref([]);
const standardForm = ref({
  id: '', // 标准id
  pbFeeLeveName: '',  // 岗位级别
  pbFeeSalary: '', // 薪资标准
  pbFeeRatio: '', // 比例
  pbFeeResult: '',  // 示例结果
})
const standardFormRules = ref({
  pbFeeLeveName: [
    { required: true, message: '请选择岗位级别', trigger: 'change' }
  ],
  pbFeeSalary: [
    { required: true, message: '请选择薪资标准', trigger: 'change' }
  ],
  pbFeeRatio: [
    { required: true, message: '请输入比例', trigger: 'blur' }
  ],
  pbFeeResult: [
    { required: true, message: '请输入示例结果', trigger: 'blur' }
  ]
});
const year = ref(new Date().getFullYear().toString()); // 默认选中当前年份
// 在data部分添加年份选项
const recentYearsOptions = ref([]);

// 生成最近10年的年份选项
const generateRecentYears = () => {
  const currentYear = new Date().getFullYear();
  const years = [];
  for (let i = currentYear - 9; i <= currentYear; i++) {
    years.push({
      label: `${i}`,
      value: i.toString()
    });
  }
  recentYearsOptions.value = years.reverse(); // 倒序排列，最新的年份在前面
};

// 弹窗打开时的处理
const handleStandardOpen = () => {
   standardForm.value= {
    id: '', // 标准id
    pbFeeLeveName: '',  // 岗位级别
    pbFeeSalary: '', // 薪资标准
    pbFeeRatio: '', // 比例
    pbFeeResult: '',  // 示例结果
  }
  // 清除之前的校验状态
  standardFormRef.value?.clearValidate();
};
// 监听弹窗关闭事件，重置表单和校验
const handleStandardClose = () => {
  standardFormRef.value?.resetFields();
  standardFormRef.value?.clearValidate();
};
// 确认修改标准
const handleStandardConfirm = () => {
  standardFormRef.value.validate(async (valid) => {
    if (valid) {
      const targetItem = feeRules.value.find(item => item.pbFeeLeveName == standardForm.value.pbFeeLeveName);
      standardForm.value.id = targetItem.id;
      const reqData = {...standardForm.value};
      let result = await updateFeeCompute(reqData)
      let data = result.data.data;
      if (result.status == 200 && result.data.code == 200){
        ElMessage.success('修改成功');
        standardVisible.value = false;
        await getFeeComputeList();
      }else {
        ElMessage.error('修改失败!');
      }
    } else {
      ElMessage.error('请完善所有必填信息');
      return false;
    }
  });
};
const pay = ()=>{   // 党费缴纳
  payVisible.value = true
};
// 获取活动面板信息
const  getFeeUserCount= async () => {
  let result = await getFeeUserCountInfo();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    cardList1.value[0].count = data.feeCount || 0;  // 本月应缴金额
    cardList1.value[1].count = data.pendingUsers || 0;     // 待缴人数
    cardList1.value[2].count = data.feeUserCount || 0;       // 已缴金额
    cardList1.value[3].count = data.feeRatio || 0;   // 缴费完成率
  }
}
// 党费计算标准
const getFeeComputeList = async () => {
  let result = await getFeeCompute();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200) {
    feeRules.value = data;
  }
}
// 获取参会人员
const getUserNameList = async () => {
  let result = await getUserNameInfo();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    memberOptions.value = data;
  }
}
// 获取党费缴纳基础信息
const getFeeRatioInfo = async () => {
  let result = await getFeeRatio();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    ratioInfo.value = data;
  }
}

// 获取支部党费收缴信息
const getFeeCommitteeList = async () => {
  let result = await getFeeCommittee({year:year.value});
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     // feeCommitteeList.value = data;
     const feePayableCount = []; // 实缴额度
     const feePaidCount = []; // 应缴额度
     const committeeName = []; // 支部名称
     data.forEach(item => {
      feePayableCount.push(Number(item.feePayableCount).toFixed(2));  // 保留两位小数
      feePaidCount.push(Number(item.feePaidCount).toFixed(2)); // 保留两位小数
      committeeName.push(item.committeeName);
     });
    chartOption0.value = {
      tooltip: {
        trigger: 'axis',
            axisPointer: { type: 'shadow' }
      },
      legend: {
        data: ['应缴金额', '实缴金额'],
            left: 'center'
      },
      // 只有数据量超过阈值时才添加dataZoom配置, todo...阈值是6, 4为X轴的数据量,可以根据实际接口数据量来选择是否添加dataZoom
      // ...(4 >= 6 && {
      //   dataZoom: [
      //     {
      //       type: 'slider',
      //       show: true,
      //       xAxisIndex: 0,
      //       start: 0,
      //       end: Math.min(100, (4 / 8) * 100),
      //       bottom: 10
      //     },
      //     {
      //       type: 'inside',
      //       xAxisIndex: 0,
      //       start: 0,
      //       end: Math.min(100, (4 / 8) * 100)
      //     }
      //   ]
      // }),
      xAxis: {
        type: 'category',
        data: committeeName
      },
      yAxis: {type: 'value',},
      series: [
        {
          name: '应缴金额',
          type: 'bar',
          data: feePaidCount,
          label: {
            show: true,
            position: 'top'
          },
          itemStyle: {color: '#d9534f'}
        },
        {
          name: '实缴金额',
          type: 'bar',
          data: feePayableCount,
          label: {
            show: true,
            position: 'top'
          },
          itemStyle: {color: '#5cb85c'}
        }
      ]
    }
  }
}





generateRecentYears(); // 在组件初始化时调用
getFeeCommitteeList();
getFeeUserCount();
getFeeComputeList();
getUserNameList();
getFeeRatioInfo();






</script>
<style lang='scss' scoped>
.life-container {
  height: calc(100% - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px;
  border-radius: 5px;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  :deep(.el-card__body){
    width: 100%;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 30px;
    font-weight: 600;
    padding: 14px 0;
  }
  .pay-container{
    margin-top: 20px;
     .pay{
       background-color: #FFFFFF;
       margin-right: 10px;
       padding: 20px;
       border-radius: 10px;
       width: 500px;
       .title{
          font-size: 18px;
          color: #333333;
          font-weight: bolder;
       }
       .date{
         font-size: 16px;
         color: #858E98;
       }
     }
     .payment-record{
       background-color: #FFFFFF;
       margin-left: 10px;
       padding: 20px;
       border-radius: 10px;
       .title{
         font-size: 18px;
         color: #333333;
         font-weight: bolder;
       }
     }
  }
  .standard-container{
    margin-top: 20px;
    .standard{
       padding: 20px 20px 40px 20px;
       border-radius: 10px;
      .title{
        font-size: 18px;
        color: #333333;
        font-weight: bolder;
      }
      .date{
        font-size: 16px;
        color: #858E98;
      }
    }
    .situation{
      padding: 20px;
      border-radius: 10px;
      .title{
        font-size: 18px;
        color: #333333;
        font-weight: bolder;
      }
    }
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }
}

</style>
